<template>
  <div class='setting-view'>
    <el-card>
      <el-form v-model='settingForm'>
        <div class='fill-setting'>
          <h1><i class='el-icon-magic-stick'/>提交设置</h1>
          <el-form-item v-for='(item,index) in fillSett' :key='index' >
            <h6>{{item.label}}</h6>
            <el-switch v-model='item.value'></el-switch>
            <div class='text' v-if='item.value&&item.textType'>
              <span>{{item.labelText}}</span>
              <el-input  v-if='item.textType===1' class='input-inner'  maxlength="30" show-word-limit v-model='item.text' placeholder='请输入吧!'></el-input>
            </div>
          </el-form-item>
        </div>
        <el-divider direction='vertical'></el-divider>
        <div class='recycle-setting'>
          <h1><i class='el-icon-coordinate'/>回收设置</h1>
          <el-form-item v-for='(item,index) in recycleSett' :key='index'>
            <h6>{{item.label}}</h6>
            <el-switch v-model='item.value'></el-switch>
            <div class='text' v-if='item.value&&item.textType'>
              <span>{{item.labelText}}</span>
              <el-input  v-if='item.textType===1' class='input-inner'  maxlength="30" show-word-limit v-model='item.text' placeholder='请输入吧!' autosize></el-input>
              <div v-if='item.textType===2' class="block">
                <el-date-picker
                  v-model="item.collectionBeginTime"
                  type="datetime"
                  placeholder="开始时间"
                  format='yyyy-MM-dd HH:mm:ss'
                >
                </el-date-picker>
                至
                <el-date-picker
                  v-model="item.collectionEndTime"
                  type="datetime"
                  placeholder="截止时间"
                  format='yyyy-MM-dd HH:mm:ss'
                >
                </el-date-picker>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { fillSettingConf,recycleSettingConf } from '@/components/gene/settingConfig'
import { deepClone,extendObj } from '@/utils'
import { settingConvertData ,dbDataConvertForSetting } from '@/utils/convert'
import { debounce,throttle } from 'throttle-debounce'

export default {
props: ['projectKey'],
watch: {
  fillSett: {
      handler() {
       this.mergeSetting()
      },
      deep: true
    },
  recycleSett: {
    handler() {
      this.mergeSetting()
    },
    deep: true
  }
},


async mounted() {
  await this.getSettingInfo()
},
data() {
  return {
    fillSett: fillSettingConf,
    recycleSett: recycleSettingConf,
    settingForm: {},
    beginDateTime: '',
    endDateTime: ''
  }
},
methods: {
  mergeSetting() {
    Object.assign(this.settingForm,deepClone(this.fillSett))
    Object.assign(this.settingForm,deepClone(this.recycleSett))
    this.saveSettingInfo()
  },
  saveSettingInfo: debounce(300,false,async function() {
    const params = settingConvertData(this.settingForm,this.projectKey)
    console.log('save!',params)
    const { data: res } = await this.$http.post('/project/setting/save',params)
    if (res.code === 200) {
      this.$message.success('更新设置成功!')
    }
  }),
  async getSettingInfo() {
    const { data: res } = await this.$http.get('/project/setting/' + this.projectKey)
    console.log(res)
    if (res.code === 200) {
      this.$message.success('获取设置成功!')
      const convertedData = dbDataConvertForSetting(res.data)
      // 将转化后的data属性值取出
      Object.keys(convertedData).forEach(key => {
        if (key in this.fillSett) {
          this.fillSett[key] = convertedData[key]
        } else if (key in this.recycleSett) {
          this.recycleSett[key] = convertedData[key]
        }
      })
    }
  }
}

}
</script>
<style lang="less" scoped>
@import "src/assets/css/themeColor";
.el-card {
  height: 100%;
  min-height: 300px;
  border-radius: 10px;
  text-align: center;
  padding: 0 300px;
}
@media screen and(max-width: 1280px){
  .el-card{
    padding:0 200px;
  }
}
/deep/.el-form{
  width: 100%;
}

.setting-view{
  box-sizing: border-box;
  height: 100%;
  padding: 15px;
  .el-card {
    overflow-y: auto;
    overflow-x: hidden;
    h1{
      font-weight: 700;
      font-size: 18px;
      display: inline-block;
      margin: 20px auto;
      letter-spacing: 5px;
    }
    .recycle-setting{
      float: right;
    }
    .fill-setting{
      float: left;
    }
    .el-form-item{
      width: 300px;
      min-height: 40px;
      //创建bfc
      overflow-y: hidden;
      h6{
        display: inline-block;
        float: left;
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
      }
      .el-switch{
        display: inline-block;
        float: right;
        line-height: 40px;
      }
      .text{
        float: left;
        width: 90%;
        span{
          display: inline-block;
          color: @theme_gray;
        }
      }
    }
  }
}
.el-divider--vertical{
  height:350px;
}

.input-inner{
  border: 0;
  outline: 0;
  padding: 0 10px;
  border-bottom: @theme_pink 1px solid;
}
.input-inner /deep/.el-input__inner{
  border: 0;
}
/deep/.el-date-editor{
  display: inline-block!important;
  width: 120px!important;
}
</style>
